<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable :request-api="getCategoryList" ref="proRef" :columns="columns" :init-param="initParams">
        <template #tableHeader>
          <el-button @click="opera(undefined)" type="primary">创建分类</el-button>
          <el-button type="danger">批量删除</el-button>
        </template>
        <template #type="{ row }">
          <span v-show="row.type === 1">楼盘</span>
          <span v-show="row.type === 2">户型</span>
        </template>
        <template #isShow="{ row }">
          <el-tag type="success" v-show="row.isShow">是</el-tag>
          <el-tag type="danger" v-show="!row.isShow">否</el-tag>
        </template>
        <template #isCover="{ row }">
          <el-tag type="success" v-show="row.isCover">是</el-tag>
          <el-tag type="danger" v-show="!row.isCover">否</el-tag>
        </template>
        <template #opera="{ row }">
          <el-button link :icon="EditPen" type="primary" @click="opera(row)">编辑</el-button>
          <el-button link :icon="Delete" type="primary">删除</el-button>
        </template>
      </ProTable>
    </div>

    <swiperCategory ref="swiperRef"></swiperCategory>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import swiperCategory from "../components/swiperCategory.vue";
import { reactive, ref } from "vue";
import { getCategoryList, createCategory, editCategory } from "@/api/modules/swiper_category";
import { ColumnProps } from "@/components/ProTable/interface";
import { EditPen, Delete } from "@element-plus/icons-vue";

const initParams = reactive({ pageSize: 10, pageNum: 1 });

const typeList = () => {
  return new Promise(res => {
    res({
      code: 200,
      msg: "成功",
      data: [
        { label: "楼盘", value: 1 },
        { label: "户型", value: 2 }
      ]
    });
  });
};

const columns: ColumnProps[] = [
  { type: "index", width: 50, label: "#" },
  { prop: "sort", label: "排序值" },
  { prop: "isShow", label: "是否出现在轮播分类中" },
  { prop: "isCover", label: "是否有封面" },
  { prop: "name", label: "分类名称" },
  { prop: "type", label: "类型所属", search: { el: "select" }, enum: typeList },
  { prop: "opera", label: "操作" }
];

const proRef = ref<InstanceType<typeof ProTable> | null>();

const swiperRef = ref<InstanceType<typeof swiperCategory> | null>();

const opera = (row: any) => {
  const params: any = {
    row: !row ? { name: "", type: 1, sort: 1, isShow: true, isCover: false } : row,
    api: !row ? createCategory : editCategory,
    getTable: proRef.value?.getTableList
  };

  swiperRef.value?.acceptParams(params);
};
</script>

<style></style>
